<template>
	<div class="column-setting">
		<div class="form-label">{{ props.label }}</div>
		<draggable
      tag="ul"
			:list="columns"
			itemKey="id"
			:sort="true"
			class="drag-col-list"
			:group="{ name: 'options' }"
			:animation="300"
      :forceFallback="true"
      ghostClass="ghostClass"
      chosenClass="chosenClass"
      dragClass="dragClass"
      handle=".drag-icon"
      @update="handleOptionsChange"
		>
    <template #item="{ element }">
      <li class="col-item">
        <div class="flex-align-center">
          <SvgIcon iconName="icon-drag" className="drag-icon"></SvgIcon>
          <eInputNumber placeholder="栅格值" style="width: 64px;margin-right: 8px;" v-model="element.span"></eInputNumber>
          <eSelect v-model="element.textAlign" style="width: 86px;" transfer>
            <eOption v-for="item in textAlignList" :key="item.value" :value="item.value">{{ item.label }}</eOption>
          </eSelect>
        </div>
        <div class="flex-align-center" style="color: #646a73;">
          <div class="common-icon" @click="handleAddColumn">
            <SvgIcon iconName="icon-plus"></SvgIcon>
          </div>
          <div v-show="columns.length > 1" class="common-icon" @click="handleOptionsRemove(element.id)">
            <SvgIcon iconName="icon-trash"></SvgIcon>
          </div>
        </div>
      </li>
    </template>
  </draggable>
	</div>
</template>

<script setup lang="ts">
import draggable from 'vuedraggable'
import { v4 as uuidv4 } from 'uuid'
import { computed, ref, watch } from 'vue'

interface IProps {
	label: string
	modelValue: any
}

const props = withDefaults(defineProps<IProps>(), {
	modelValue: []
})

const emit = defineEmits<{
  (e: 'update:modelValue', data: any[]): void
}>()

const columns = ref<any[]>([])

watch(
	() => props.modelValue,
	(val) => {
		if (val && val.length) {
      columns.value = val.map((col: any) => {
        if (!col.id) {
          col.id = uuidv4()
        }
        return col
      })
    }
	},
	{ immediate: true }
)

const textAlignList = computed(() => {
  return [
    { label: '左对齐', value: 'left' },
    { label: '居中', value: 'center' },
    { label: '右对齐', value: 'right' }
  ]
})

function handleAddColumn() {
  columns.value.push({
    span: 6,
    textAlign: 'left',
    id: uuidv4(),
    list: []
  })
  emit('update:modelValue', columns.value)
}

function handleOptionsRemove(id: string) {
  const index = columns.value.findIndex(item => item.id === id)
  if (index > -1) {
    columns.value.splice(index, 1)
  }
  emit('update:modelValue', columns.value)
}

function handleOptionsChange() {
  emit('update:modelValue', columns.value)
}
</script>

<style lang="less" scoped>
.column-setting {
	width: 100%;
  .form-label {
    margin-bottom: 8px;
    color: #515a6e;
  }
  .drag-col-list {
    .col-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 36px;
      line-height: 1;
      margin: 2px 0;
      .drag-icon {
        width: 1.2em;
        height: 1.2em;
        margin-right: 8px;
        &:hover {
          cursor: grab;
        }
      }
      &:hover {
        background: rgba(31, 35, 41, 0.08);
        border-radius: 4px;
      }
      .common-icon {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2px;
        box-sizing: border-box;
        &:not(:last-child) {
          margin-right: 8px;
        }
        &:hover {
          background: rgba(31, 35, 41, 0.15);
          border-radius: 4px;
          cursor: pointer;
        }
      }
    }
  }
  //拖动排序样式
  .dragClass, .chosenClass {
    border-radius: 4px;
    opacity: 1;
    box-sizing: border-box;
    width: 100%;
  }

  .dragClass {
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.3);
    cursor: grab !important;
  }

  .ghostClass {
    opacity: 0 !important;
  }

  .flex-align-center {
    display: flex;
    align-items: center;
  }
}
</style>
